<template>
  <img alt="Vue logo" src="./assets/logo.png" />
  <w-tree
    :tree-data="treeData"
    :default-expand="['3-1']"
    @expand="onExpand"
    :wKey="'uuid'"
    :wTitle="'name'"
    :wChildren="'node'"
  ></w-tree>
  <button @click="onClick">改变</button>
</template>

<script lang="ts">
import { defineComponent, reactive } from "vue";
import WTree from "./components/wtree/wtree.vue";
import { TreeData } from "./components/wtree/type";
import wNode from "./components/wNode.vue";
export default defineComponent({
  name: "App",
  components: {
    WTree,
  },
  setup() {
    const treeData = reactive<Array<TreeData>>([
      {
        key: "1",
        uuid: "1-1",
        title: "1",
        name: "liwa",
      },
      {
        key: "2",
        uuid: "2-1",
        title: "2",
        name: "liwa1",
        node: [],
      },
      {
        key: "3",
        uuid: "3-1",
        title: "3",
        name: "liwa3",
        node: [
          {
            key: "3-1",
            uuid: "3-1-1",
            title: "3-1",
            name: "liwa4",
          },
          {
            key: "3-2",
            uuid: "3-1-2",
            title: "3-2",
            name: "liwa5",
            node: [],
          },
        ],
      },
    ]);
    const onClick = () => {
      treeData[0].name = "111";
    };
    // 展开自定义事件 可以不传
    const onExpand = (treeData: TreeData) => {
      console.log("heieih", treeData);
    };
    return {
      treeData,
      onClick,
      onExpand,
      wNode,
    };
  },
});
</script>

<style>
#app {
  width: 50%;
  height: 800px;
  margin: 0 auto;
  border: 1px solid white;
  padding: 10px;
}
html {
  background: #2e2e2e;
  color: whitesmoke;
}
</style>
